<template>
  <h2>Child子级组件</h2>
  <h3>{{ msg }}</h3>
  <button @click="update">更新数据</button>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
} from "vue";
export default defineComponent({
  name: "child",
  //vue2.x中的生命周期钩子
  beforeCreate() {
    console.log("2.x中的beforeCreate...");
  },
  created() {
    console.log("2.x中的created...");
  },
  beforeMount() {
    console.log("2.x中beforeMount...");
  },
  mounted() {
    console.log("2.x中mounted...");
  },
  beforeUpdate() {
    console.log("2.x中beforeUpdate...");
  },
  updated() {
    console.log("2.x中updated...");
  },
  //vue2.x中的beforeDestroy和destroyed这两个生命周期钩子函数
  //在vue3中已经改名成了beforeUnmount和unmounted
  beforeUnmount() {
    console.log("2.x中beforeUnmount...");
  },
  unmounted() {
    console.log("2.x中unmounted...");
  },


  setup() {
    console.log('3.0中的setup...')
    //看beforeUpdate和updated生命周期函数
    let msg = ref("ddd");
    const update = () => {
      msg.value += "==";
    };

    onBeforeMount(() => {
      console.log('3.0中onBeforeMount...')
    })
    onMounted(() => {
      console.log('3.0中onMounted...')
    })
    onBeforeUpdate(() => {
      console.log('3.0中onBeforeUpdate...')
    })
    onUpdated(() => {
      console.log('3.0中onUpdated...')
    })
    onBeforeUnmount(() => {
      console.log('3.0中onBeforeUnmount...')
    })
    onUnmounted(() => {
      console.log('3.0中onUnmounted...')
    })
    return {
      msg,
      update,
    };
  },
});
</script>
